<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-13 09:52:40
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-25 13:08:37
 * @FilePath: /h-radar-expose/components/ExposeList/Tabs.vue
 * @Description:
-->
<template>
  <ul class="tabs-wrap">
    <li
      v-for="(item, index) in tabsList"
      :key="index"
      class="tab-item"
      :class="{ active: activeName === item.typeCode }"
      @click="tabClick(item)"
    >
      {{ item.name }}({{ item.num }})
    </li>
  </ul>
</template>

<script lang="ts" setup>
import {defineProps,defineEmits, watch,ref} from 'vue';
import {useStore} from 'vuex';
const store=useStore();
const emit=defineEmits(['tabClick']);
const props=defineProps({
  tabsData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    category: {
      type: String,
      default: '',
    },
    tabsList: {
      type: Array as any,
      default: () => [],
    },
})
const internalTabsList = ref(props.tabsList); // 创建一个内部的响应式变量
const activeName=ref('sys');
  watch(()=>props.category,(newVal)=>{
    if (newVal) {
          activeName.value = newVal
        }
  })
 const tabClick=(item)=> {
      activeName.value = item.typeCode
      emit('tabClick', activeName.value, item)
    }
   const getExposedTypes= async()=> {
      const { code, data = [] } = await store.dispatch(
        'expose/getExposedTypes'
      )
      if (code !== 0) {
        return
      }
      const updatedData = data.map((item) => ({ ...item, num: 0 }));
      internalTabsList.value = updatedData; // 使用内部的响应式变量
    }
</script>
<style lang="scss" scoped>
.tabs-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  z-index: 9;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  .tab-item {
    cursor: pointer;
    font-size: 16px;
    padding: 16px 24px;
    border-bottom: 2px solid transparent;
    // margin-left: 24px;
    &.active {
      color: $-v-color-primary;
      border-bottom: 2px solid $-v-color-primary;
      font-weight: 600;
    }
    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
